import React, { useEffect, useState } from "react";
import "./index.less";
import { reqWeather } from "../../api";
import { useLocation, useNavigate } from "react-router-dom";
// import menuList from "./../../config/menuConfig";

import { Modal } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import storage from "../../utils/storageUtils";
import memory from "../../utils/memoryUtils";
import MyButton from "../MyButton";
import { connect } from "react-redux";
const { confirm } = Modal;

// 天气类型约束接口
interface Weather {
  city: string;
  humidity: string;
  temp: string;
  weather: string;
}
// 初始化天气信息占位用
let weatherInfo: Weather = {
  city: "",
  humidity: "",
  temp: "",
  weather: "",
};

// Myheader组件
const Myheader: React.FC = (props: any) => {
  // 路由组件中先拿到useLocation 需要获取一些路由信息
  const location = useLocation();
  // 获取当前的路由所在
  const Currentpath = location.pathname;

  // useNavigate用于路由跳转
  let history = useNavigate();

  // header标题会根据当前选中的二级页面显示titlename
  const [titleName, settitleName] = useState("首页");

  // 获取用户信息用于提示
  // const user = localStorage.getItem("user_key");
  // let userid: any = "";
  // if (user) {
  //   userid = JSON.parse(user as string);
  // }
  // else {
  //   history("/admin", { replace: true });
  // }
  const [username] = useState(
    // 从内存中保存的memory.user中读取用户信息中的名字,显示在提示框
    memory.user.username
    // userid
  );

  // 天气信息useState
  const [weather, setweather] = useState(weatherInfo);
  // 获取天气的函数 reqWeather已经设置好天气相关api

  // 删除当前的localsrotage内信息,用于退出登录
  const Logout = () => {
    // confirm是antd中对话框modal的确定属性,会弹出提示框确定是否执行
    confirm({
      title: "您确定退出吗? 退出后返回登陆界面。",
      icon: <ExclamationCircleOutlined />,
      onOk() {
        //跳转到login登录界面
        history("/login", { replace: true });
        // 对话框选择确定后会执行下面
        console.log("已经退出登录!");
        // 先删除本地存储的用户信息
        storage.deleteUser();
        // memory.user中用户信息设置为空
        memory.user = {};
        // 清除localstorage中的用户信息
        localStorage.clear();
        //跳转到login登录界面
        history("/login", { replace: true });
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  //获取天气信息函数 要放在useEffect中
  const getWeather = async () => {
    // 获取到天气信息并且设置到weather
    const res = await reqWeather();
    setweather(res.data);
  };

  // 根据当前的路由所处,去对比menuConfig对应的路由从而决定当前的titleName
  const getTitleName = () => {
    // 以前的方法用redux的方法代替
    // // 要便利对比menuconfig中的menuList与当前路由相同的
    // menuList.forEach((item) => {
    //   // 一层中便利对比
    //   if (item.key === Currentpath) {
    //     settitleName(item.title);
    //     // 一层中没有的话,要再到children中继续便利
    //   } else if (item.children) {
    //     // 数组有方法find()
    //     const citem = item.children.find((citem) => citem.key === Currentpath);
    //     // 如果内层children中使用find方法可以找到的话,就使用内层的citem的title
    //     if (citem) {
    //       settitleName(citem.title);
    //     }
    //   }
    // });

    // 直接从redux中读取titleName 用来设置标题名称
    // 因为使用的是react-redux 会自动订阅, 所以只要store一发生改变就自己更新了
    settitleName(props.headTitle);
  };

  // 界面每要重新渲染都重新获取天气信息
  useEffect(() => {
    // 获取天气信息
    getWeather();
    // 获取当前所处路由的titleName
    getTitleName();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [username, Currentpath]);

  // header中显示当前时间并且一秒刷新一次
  // 用useEffect来初始获取当前时间
  const [NowTime, setNowTime] = useState(new Date().toLocaleString());
  // 用useEffect监听NowTime 有变化就刷新一次,因为加载页面挂载的时候会调用一次,所以会不停的加载刷新时间
  useEffect(() => {
    const timer = setTimeout(() => {
      setNowTime(new Date().toLocaleString());
    }, 1000);
    // 即使是setTimeout也要clearTimeout
    return () => {
      clearTimeout(timer);
    };
  }, [NowTime]);

  return (
    <div className="header-container">
      <div className="header-top">
        <span>
          您好,尊敬的用户<span>{username}</span>
        </span>
        {/* // 自定义组件 长得像a但是是button写的一个a标签 */}
        {/* 要把这个组件上的点击函数和一些文字类信息当作props传入这个组件 */}
        <MyButton onClick={Logout} placeHolder="点击退出"></MyButton>
      </div>
      <div className="header-bottom">
        <div className="header-bottom-title">
          当前-<span>{titleName}</span>-页面
        </div>
        <div className="current-info">
          <span>{NowTime} ~</span>
          <span>
            当前<span>{weather.city}</span>天气为:<span>{weather.weather}</span>
            ,当前温度为<span>{weather.temp}℃</span>
            ,湿度为<span>{weather.humidity}</span>
          </span>
        </div>
      </div>
    </div>
  );
};

// 把store中的状态映射为一般属性
const mapStateToProps = (state: any) => {
  return { headTitle: state.headTitle };
};

// react-redux的connect把ui组件和状态连接起来
export default connect(
  //应用mapStateToProps 把store中的状态映射为一般属性传给组件的props
  mapStateToProps,
  // header组件只用于显示状态 不涉及状态的修改 这个状态的修改再left-bav中操作
  {}
)(Myheader);
